<template>
	<!-- 支付详情页 -->
	<view class="details">
		<view class="common-list card">
			<view class="img"><image mode="aspectFit" class="img" :src="detailsItem.image" :alt="detailsItem.image" /></view>
			<view class="img-list">
				<view class="img-title">
					<view class="title">
						<text class="titleTop">{{ detailsItem.title }}</text>
						<u-tag v-if="detailsItem.keywords" :text="detailsItem.keywords" plain size="mini" type="success"></u-tag>
					</view>
					<view class="text-content" v-html="detailsItem.content"></view>
					<text class="text">市场售价:¥ {{ detailsItem.marketprice }}</text>
				</view>
				<view class="img-text">
					<text class="num">¥ {{ detailsItem.price }}</text>
					<text class="remarks">{{ detailsItem.sales || 0 }}人购买</text>
				</view>
			</view>
		</view>
		<view class="card card1" v-if="detailsItem.content2">
			<txt-title title="Detail" />
			<view class="common-list">
				<u-album :urls="detailsItem.content2"></u-album>
				<text class="text-content">{{detailsItem.description}}</text>
			</view>
			
		</view>
		<view class="card">
			<view class="list">
				<view class=" listItem" v-for="item in indexList" :key="item.title">
					<view class="title" @click="clickNav(item)">
						{{ item.title }}
						<text v-if="item.remarks" class="remarks">{{ item.remarks + item.max + '积分' }}</text>
					</view>
					<u-tag v-if="item.state" :text="item.state" @click="clickNav(item)" plain size="mini" :type="item.type"></u-tag>
					<u-number-box v-if="item.model" :min="item.min" :max="comPrice ? item.max : detailsItem[item.model]" v-model="detailsItem[item.model]"></u-number-box>
				</view>
			</view>
			<!-- 计数 -->
			<!-- <view class="money"><u-number-box v-model="detailsItem.num"></u-number-box></view> -->

			<view class="moneys">
				<view class="left">
					共优惠
					<text class="num">¥ {{ discountPrice }}</text>
				</view>
				<view class="right">
					小计
					<text class="num">¥ {{ comPrice }}</text>
				</view>
			</view>
			<view class="buttons"><u-button @click="pay" type="primary" text="购买"></u-button></view>
		</view>
	</view>
</template>

<script>
import {
	addShopping, //加购
	submitShopping, // 提交订单
	payment // 支付调取页面
} from '@/common/api.js';
import { userIndex } from '@/common/api.js';
export default {
	data() {
		return {
			// 详情数据
			detailsItem: {
				score: 0,
				num: 1
			},
			indexList: [
				{
					title: '我的优惠券',
					url: 'https://cdn.uviewui.com/uview/album/1.jpg',
					navUrl: '/pages/class/coupon/coupon',
					state: '未选择优惠券',
					type: 'warning'
				},
				{
					title: '我的积分',
					url: 'https://cdn.uviewui.com/uview/album/2.jpg',
					navUrl: '/pages/mine/integrate/integrate',
					min: 0,
					remarks: '当前总积分为',
					// 总积分数
					model: 'score',
					max: 999
				},
				{
					title: '课时',
					url: 'https://cdn.uviewui.com/uview/album/2.jpg',
					min: 1,
					model: 'num',
					// 总积分数
					max: 999
				}
			],
			// 购买课时数
			moneyNumber: 1,
			// 共优惠多少元
			discountPrice: 0
		};
	},
	computed: {
		comPrice() {
			if (this.detailsItem.num * this.detailsItem.price >= this.$store.state.vuex_coupon?.coupon?.result_data?.money) {
				this.discountPrice = this.$store.state.vuex_coupon?.coupon?.result_data?.number;
				return this.detailsItem.num * this.detailsItem.price - this.$store.state.vuex_coupon?.coupon?.result_data?.number - (this.detailsItem.score || 0) / 100;
			} else {
				let Price = this.detailsItem.num * this.detailsItem.price - (this.detailsItem.score || 0) / 100;
				if (Price >= 0) {
					return Price;
				} else {
					return 0;
				}
			}
		}
	},
	methods: {
		// 点击跳转 优惠券积分等
		clickNav(item) {
			uni.navigateTo({
				url: item.navUrl + '?comPrice=' + this.comPrice
			});
		},
		async pay(item) {
			// 先加购
			let { cart_id } = await addShopping({
				// 商品id
				goods_id: this.detailsItem.id,
				nums: this.detailsItem.num,
				sceneval: 2
			});
			// 提交订单
			let { order_sn } = await submitShopping({
				ids: cart_id, // 产品id
				user_coupon_id: this.$store.state.vuex_coupon?.id, // 优惠券
				use_jifen: this.detailsItem.score || 0
			});
			// 得到支付逻辑
			let { appId, nonceStr, package: wxpackage, paySign, signType, timeStamp } = await payment({
				orderid: order_sn,
				paytype: 'wechat'
			});
			// 支付
			if (this.comPrice) {
				wx.requestPayment({
					timeStamp,
					nonceStr,
					package: wxpackage,
					signType,
					paySign,
					success(res) {
						console.log('微信调取成功', res);
						uni.navigateBack({
							delta: 1
						});
						uni.$u.toast('支付成功');
					},
					fail(res) {
						console.log('微信调取失败', res);
						uni.$u.toast('支付失败,请查看课时是否足够');
					}
				});
			}
			// 总积分刷新
			await this.scoreNew();
		},
		async scoreNew() {
			// 总积分数据
			let { score } = await userIndex();
			this.indexList[1].max = score;
		}
	},
	async onLoad(params) {
		console.log('11detailsItem', uni.getStorageSync('shoppingDetails'));
		// 跳转传输数据
		this.detailsItem = uni.getStorageSync('shoppingDetails');
		// 赋值个数
		// this.moneyNumber = params.item.num || 1;
		await this.scoreNew();
		// 进入详情页清空 优惠券
		this.$store.commit('$coupon', {});
	},
	onShow() {
		this.indexList[0].state = this.$store.state.vuex_coupon?.id ? '已选择优惠券' : '未选择优惠券';
		this.indexList[0].type = this.$store.state.vuex_coupon?.id ? 'success' : 'warning';
		console.log('优惠券', this.$store.state.vuex_coupon, this.$store.state.vuex_coupon?.coupon?.result_data?.money);
	}
};
</script>

<style lang="scss">
page {
	background-color: #ccc;
}
.card1{
	padding:28rpx
}
.common-list {
	// width: 100%;
	// height: 159rpx;
	padding: 30rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	.text-content {
		margin: 14rpx 0;
		font-size: 28rpx;
	}
	.img {
		width: 100%;
		height: 300rpx;
	}
	.img-list {
		// display: flex;
		// justify-content: space-between;
		// flex-direction: column;
		margin-left: 23rpx;
		width: 100%;
		.img-title {
			margin: 28rpx 0;
			font-size: 28rpx;
			color: #3b3a3f;
			.title {
				display: flex;
				font-weight: 600;
				.titleTop {
					font-size: 32rpx;
					margin-right: 20rpx;
				}
			}
			// .text-content {
			// 	margin: 14rpx 0;
			// 	font-size: 28rpx;
			// }
			.text {
				text-decoration: line-through;
				color: #ccc;
			}
		}
		.img-text {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: flex-end;
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 100rpx;
		height: 40rpx;
	}
}
.card2{
	padding: 28rpx;
}
.list {
	// height: 250rpx;
	.listItem {
		padding-bottom: 14 * 2rpx;
		// border-bottom: 1px solid #cccccc;
		padding: 28rpx;
		display: flex;
		justify-content: space-between;
		.remarks {
			font-size: 22rpx;
			color: #a1a3a7;
		}
	}
}
.money {
	display: flex;
	justify-content: flex-end;
	.num {
		color: #f77b4b;
	}
}
.moneys {
	display: flex;
	justify-content: space-between;
	margin: 28rpx 28rpx;
	.num {
		color: #f77b4b;
	}
}
</style>
